<template>
	<view>
		<uni-card title="单位名称" sub-title="距离我1km" extra="已完成" :thumbnail="avatar">
			<view class="content">
				<image src="../../static/swiper_img/1.jpg" mode=""></image>
				<p>故障内容</p>
			</view>
			<view class="detialTime">
				<view>
					接单时间:2022-1-2
				</view>
				<view>
					预约时间:2022-1-2
				</view>
				<view>
					到场时间:2022-1-2
				</view>
				<view>
					完成时间:2022-1-2
				</view>
			</view>
			<view class="orderNumber">
				工单号:123456789
			</view>
		</uni-card>
		<uni-card title="单位名称" sub-title="距离我1km" extra="已完成" :thumbnail="avatar">
			<view class="content">
				<image src="../../static/swiper_img/1.jpg" mode=""></image>
				<p>故障内容</p>
			</view>
			<view class="detialTime">
				<view>
					接单时间:2022-1-2
				</view>

				<view>
					到场时间:2022-1-2
				</view>
				<view>
					完成时间:2022-1-2
				</view>
			</view>
			<view class="orderNumber">
				工单号:123456789
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		name: "pages-myOrder-accomplish",
		data() {
			return {
				avatar: '/static/phone.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				}
			}
		},
		methods: {
			gotoNext() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-completed/orderProgress-completed'
				})
			},
		}
	}
</script>

<style lang="less">
	.uni-card {
		display: flex;
		flex-direction: column;

		.content {
			display: flex;
			width: 100%;
			height: 150rpx;


			image {
				width: 200rpx;
				height: 100%;
			}

			p {
				width: calc(100% - 200rpx);
				height: 100%;
				padding: 0rpx 30rpx;
			}
		}

		.detialTime {
			display: flex;
			flex-direction: column;
			padding-top: 20rpx;

		}

		.orderNumber {
			margin-top: 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			// background-color: aqua;
		}
	}
</style>
